<template>
  <MainContent
    :title="`${Route.query.name}明细`"
    back
  >
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="用户ID">
            <el-input
              v-model="tableForm.userId"
              clearable
              placeholder="请输入用户ID"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="tableForm.phone"
              clearable
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="defaultTime"
            />
          </el-form-item>

          <!-- <el-form-item class="">
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-button type="primary" @click="showDialog = true"
              >新增积分</el-button
            >
          </el-form-item> -->
        </template>
        <!-- <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="showDialog = true">新建模型</el-button>
          </el-form-item>
        </template> -->
      </SearchBar>
    </template>
    <!--    <template #actions-bar>-->
    <!--      <el-button type="primary" @click="showDialog = true">新建模型</el-button>-->
    <!--    </template>-->
    <LayoutTable
      ref="tokensManage"
      url="/extensions/currency/manage/pageCurrencyDetailed"
      :set-search="setSearch"
      disable-auto-height
      :param="tableForm"
    >
      <el-table-column
        prop="userId"
        label="用户ID"
        width="180"
      />

      <el-table-column
        prop="phone"
        label="手机号"
        width="120"
      />

      <el-table-column
        prop="recordType"
        label="状态"
        width="100"
      >
        <template #default="scope">
          {{ recordTypeData[scope.row.recordType] }}
        </template>
      </el-table-column>

      <el-table-column
        prop="amount"
        label="数量"
        width="120"
      />

      <el-table-column
        prop="remark"
        label="备注"
        width="230"
      />
    
      <el-table-column
        prop="orderNo"
        label="订单号"
        width="180"
      />

      <el-table-column
        prop="updateTime"
        label="时间"
        width="180"
      >
        <template #default="scope">
          {{ dateFormat(scope.row.updateTime) }}
        </template>
      </el-table-column>
    </LayoutTable>
  </MainContent>
</template>
<script lang="ts" setup>
// import marketingCenterApi from "@/api/marketingCenterApi";
// import MedalAwarded from './component/MedalAwarded.vue'
// import ExportIntergal from "./component/ExportIntergal.vue";
import { dateFormat } from "@/utils/filters";
// const Store = useStore();
const Route = useRoute();
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] // '12:00:00', '08:00:00'
const searchTime = ref('')
const tableForm = ref({
  userId: "",
  phone: "",
  startTime: '',
  endTime: '',
  currencyId: Route.params.id,
});
const recordTypeData = ref({
  0: '获取',
  1: '消耗',
  2: '扣减',
  3: '批量导入',
});
// const adminType = Store.state.user.adminType;
// const integralId = ref() 
// const showDialog = ref(false);
// const modelId = ref(Number(null));
const setSearch = ref(Number());

watch(searchTime, (val) => {
  if (val){
    tableForm.value.startTime = String(new Date(val[0]).getTime())
    tableForm.value.endTime = String(new Date(val[1]).getTime())
  } else {
    tableForm.value.startTime = ''
    tableForm.value.endTime = ''
  }

  console.log('[ tableForm.value ]', tableForm.value)
})

// const setStatus = (row: any) => {
//   ElMessageBox.confirm("是否修改状态?", "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   })
//     .then(() => {
//       customerUpdateStatus(row);
//     })
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "取消操作",
//       });
//     });
// };


// const customerUpdateStatus = async(row:any) => {
//   let rs: any = await marketingCenterApi.updStatus({ id: row.id, status: row.status == 0 ? 1 : 0, name: row.name });
//   if (rs.code === 200) {
//     ElMessage.success('状态修改成功')
//     onSearch()
//   }
// }

// const toEdit = (row: any) => {
//   integralId.value = row.id
//   showDialog.value = true;
// }

// const onSearch = () => {
//   setSearch.value++;
// };

</script>

<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 3px;
  margin: 10px;
  width: 50px;
  height: 50px;
}
</style>
